<template>
  <div class="home-container">

    <a-particles>
      <div class="banner">
        <img class="banner_img" src="../../assets/image/home_head.png" alt="">
        <div class="banner_text">
          <a-flex vertical align="center" justify="center" :style="{height: '100%'}">
            <h2 class="banner_text_headline">海量精彩设计 一键生成</h2>

            <a-input-search
              v-model:value="searchValue"
              placeholder="搜索一下，快速找模版"
              enter-button
              style="width: 40vw"
              @search="onSearch"
            />
          </a-flex>
        </div>
      
      </div>
    </a-particles>
    
    <div class="welcome">
      <div class="welcome_inner">
        <a-row>
          <a-col class="feature-item" :span="8">
            <Html5Outlined style="font-size: 60px;" />
            <h3>专注H5 始终如一</h3>
            <p>三年保持行业领先</p>
          </a-col>
          <a-col class="feature-item" :span="8">
            <BuildOutlined style="font-size: 60px;" />
            <h3>海量 H5 模版</h3>
            <p>一键生成，一分钟轻松制作</p>
          </a-col>
          <a-col class="feature-item" :span="8">
            <BulbOutlined style="font-size: 60px;" />
            <h3>极致体验</h3>
            <p>用户的一致选择</p>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- <a-particles> -->

      <div class="content" >
        <div class="hot-title">
          <a-flex vertical>
            <h2>热门海报</h2>
            <p>只需替换文字和图片，一键生成H5</p>
          </a-flex>
        </div>
        
        <TemplateList :data="10">
          <template #tag>
            <a-tag color="error">HOT</a-tag>
          </template>
        </TemplateList>

        <div class="hot-title">
          <a-flex justify="space-between" align="center" >
            <h2>我的作品</h2>
            <span @click="jumpPage('/myWork')">查看我的所有作品</span>
          </a-flex>
        </div>
        
        <TemplateList :data="4" />
      </div>

      
    <!-- </a-particles> -->

    
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from "vue-router"
import { Html5Outlined, BuildOutlined, BulbOutlined } from '@ant-design/icons-vue';
import TemplateList from "../../components/common/templateList.vue"

const router = useRouter()
const jumpPage = (url) => {
  router.push({
    path: url
  })
}

const searchValue = ref<string>('')

const onSearch = (value: string) => {
  console.log('use value', value);
  console.log('or use this.value', searchValue.value);
};

</script>

<style lang="scss">
@import "../../theme/styles/mixin.scss";
.home-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -70px;
 
  .banner {
    height: 450px;
    width: 100%;
    position: relative;
    &_img {
      width: 100%;
      height: 100%;
    }
    &_text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      &_headline {
        text-shadow: 0 0 1px rgba(68, 92, 116, 0.2),
        0 2px 8px rgba(57, 76, 96, .15);
        font-size: 2rem;
        color: #fff;
      }
    }
  }

  .welcome {
    width: 100%;
    background-color: #f2f2f2;
    // background: linear-gradient(180deg, rgba(242,242,242, 0.21) 0%, rgba(242,242,242, 1) 100%);
    &_inner {
      width: 1200px;
      margin: 0 auto;
      .feature-item {
        padding: 20px 0;
        svg {
          @include color;
        }
        h3 {
          margin: 5px 0;
          font-size: 19px;
          color: #333;
          line-height: 1.6
        }
        p {
          color: #666;
          margin-bottom: 1rem;
        }
      }
    }
  }

  .content {
    width: 100%;
    max-width: 1200px;
    padding: 0 24px 24px 30px;
    margin: 0 auto;
    box-sizing: border-box;
    .hot-title {
      padding: 20px 0;
      span {
        @include color;
        cursor: pointer;
        z-index: 2;
      }
    }
  }
}


</style>